<template>
  <div class="func">
    <ToolBar :add-data="setAddDialogVisible" :delete-data="deleteById" :update-data="updateById"></ToolBar>
    <el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        :props="defaultProps">
    </el-tree>
    <el-table
        border
        :data="tableData"
        row-key="id"
        :tree-props="{children:'funcList',hasChildren:'hasChildren'}">
      <el-table-column
          type="index"
          label="编号"
          width="50">
      </el-table-column>
      <el-table-column
          prop="funcName"
          label="功能名称">
      </el-table-column>
      <el-table-column
          prop="funcCode"
          label="功能编码">
      </el-table-column>
      <el-table-column
          prop="delete"
          label="功能状态">
        <template slot-scope="scope">
<!--          <el-tag :type="scope.row.delete?'danger':''"><span v-text="scope.row.delete?'停用':'正常'"></span></el-tag>-->
          <el-switch
              v-model="scope.row.delete"
              :active-value="false"
              :inactive-value="true" @change="handleDelete(scope.row,false)">
          </el-switch>
        </template>
      </el-table-column>
      <!--      <el-table-column-->
      <!--          prop="name"-->
      <!--          label="账号">-->
      <!--      </el-table-column>-->
      <!--    <el-table-column-->
      <!--        label="其他信息"-->
      <!--        width="180">-->
      <!--      <template slot-scope="scope" v-if="scope.row">-->
      <!--        <el-popover trigger="hover" placement="top">-->
      <!--          <p>创建者: {{ scope.row.createUser.name }}</p>-->
      <!--          <p>创建时间: {{ scope.row.createdTime|formatDate }}</p>-->
      <!--          <p>更新者: {{ scope.row.updateUser.name}}</p>-->
      <!--          <p>更新时间: {{ scope.row.updateTime|formatDate}}</p>-->
      <!--          <div slot="reference" class="name-wrapper">-->
      <!--            <el-tag size="medium">{{ scope.row.funcname }}</el-tag>-->
      <!--          </div>-->
      <!--        </el-popover>-->
      <!--      </template>-->
      <!--    </el-table-column>-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete( scope.row,true)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          hide-on-single-page
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size=size
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>
    <el-dialog :title="'功能'+(operationType===0?'添加':'编辑')" top="5vh" :visible.sync="dialogVisible">
      <el-form :model="func">
        <el-row>
          <el-col :span="12">
            <el-form-item label="父级功能" :label-width="formLabelWidth">
              <el-select v-model="func.pid" placeholder="请选择" value-key="id" class="w100" @change="treeData">
                <el-option label="父级功能" :value="null">父级功能</el-option>
                <el-option
                    v-for="item in treeData"
                    :key="item.funcName"
                    :label="item.funcName+(item.delete?'(已停用)':'')"
                    :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="功能名称" :label-width="formLabelWidth">
              <el-input v-model="func.funcName" autocomplete="off" class="w100"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="功能编码" :label-width="formLabelWidth">
              <el-input v-model="func.funcCode" autocomplete="off" class="w100"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" :label-width="formLabelWidth">
              <el-radio-group v-model="func.delete">
                <el-radio :label="false">是</el-radio>
                <el-radio :label="true">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="功能备注" :label-width="formLabelWidth">
              <el-input v-model="func.summary" autocomplete="off" class="w100"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">

          </el-col>
          <el-col :span="12">

          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFunc" v-if="operationType===0">确 定 添 加</el-button>
        <el-button type="primary" @click="updateFunc" v-else>确 定 修 改</el-button>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import ToolBar from "@/components/common/ToolBar";

export default {
  name: "Func",
  components: {ToolBar},
  data() {
    return {
      currentPage: 1,
      total: 0,
      size: 10,
      tableData: [],
      treeData: [],
      defaultProps: {
        children: 'funcList',
        label: 'funcName'
      },
      func: {
        funcCode: null,
        funcName: null,
        funcType: null,
        orderNo: null,
        pid: null,
        summary: null,
        delete: false,

      },
      operationType: 0,
      dialogVisible: false,
      formLabelWidth: '80px'
    }
  },
  created() {
    this.getDataList()
    this.getTreeDataList()
  },
  methods: {
    handleEdit(index, row) {
      this.operationType = 1
      this.func = row
      this.dialogVisible = true
      console.log(index, row);
    },
    handleDelete(row,isDelete) {
      console.log(row,'',);
      this.deleteFunc(row,isDelete)
    },
    getDataList() {
      axios.get("/func/list/" + this.currentPage + "/" + this.size+"/-1").then(res => {
        console.log("功能列表：", res)
        if (res.data.success) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          this.pages = res.data.data.pages
        }
      })
    },
    getTreeDataList() {
      axios.get("/func/list/0").then(res => {
        console.log("功能列表2：", res)
        if (res.data.success) {
          this.treeData = res.data.data
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getDataList()
    },
    deleteById() {
      console.log("功能删除")
    },
    setAddDialogVisible() {
      this.operationType = 0;
      this.dialogVisible = true

    },
    selectChange() {

    },
    addFunc() {
      this.func.createUserId = this.$store.state.userInfo.id
      if(this.func.pid===null){
        this.func.funcType=0
      }
      axios.post("/func/add",this.func).then(res=>{
        if(res.data.success){
          this.$tools.showMessage(res.data.message,"success")
          this.getDataList()
          this.dialogVisible=false
          this.operationType=0
          this.func={}
        }else{
          this.$tools.showMessage(res.data.message,"danger")
        }
      })
    },
    updateFunc() {
      console.log("更新")
      this.func.updateUserId = this.$store.state.userInfo.id
      axios.post("/func/update",this.func).then(res=>{
        if(res.data.success){
          this.$tools.showMessage(res.data.message,"success")
          this.getDataList()
          this.dialogVisible=false
          this.operationType=0
          this.func={}
        }else{
          this.$tools.showMessage(res.data.message,"danger")
        }
      })
    },
    deleteFunc(func,isDelete) {
      let uid = this.$store.state.userInfo.id
      switch (isDelete){
        case true:
          this.$tools.showMessageBox(func.pid === null ? "确认删除功能：" + func.funcName + "及其子功能？" : "确认删除功能：" + func.funcName, '提示', "warning").then(confirm => {
            axios.post("/func/delete/" + uid+"/1", func).then(res => {
              if (res.data.success) {
                this.$tools.showMessage(res.data.message, "success")
                this.getDataList()
              } else {
                this.$tools.showMessage(res.data.message, "danger")
              }
            })
          }).catch(cancel => {
            this.getDataList()
            this.$tools.showMessage("操作取消！", "info")
          })
          break;
        case false:
          this.$tools.showMessageBox(func.pid === null ? "确认停用功能：" + func.funcName + "及其子功能？" : "确认停用功能：" + func.funcName, '提示', "warning").then(confirm => {
            axios.post("/func/delete/" + uid+"/0", func).then(res => {
              if (res.data.success) {
                this.$tools.showMessage(res.data.message, "success")
                this.getDataList()
              } else {
                this.$tools.showMessage(res.data.message, "danger")
              }
            })
          }).catch(cancel => {
            this.getDataList()
            this.$tools.showMessage("操作取消！", "info")
          })
      }
 

    },
    updateById() {
      console.log("功能修改")
    }
  }
}
</script>

<style scoped>

</style>